<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
    />
    <title>流式布局</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header class="app">
      <ul>
        <li class="close">
          <img src="images/close.png" alt="关闭按钮" />
        </li>
        <li class="logo">
          <img src="images/logo.png" alt="京东logo" />
        </li>
        <li class="title">打开京东App，购物更轻松</li>
        <li class="open">立即打开</li>
      </ul>
    </header>
    <div class="search_login">
      <div class="nav">
        <img src="images/s-btn.png" alt="nav" />
      </div>
      <div class="search">
        <input type="text" name="search" id="search" />
        <img src="images/jd.png" alt="京东icon" />
        <div class="magnify"></div>
      </div>
      <div class="login">登录</div>
    </div>
    <div class="content">
      <div class="slideshow">
        <img src="upload/banner.dpg" alt="" />
      </div>
      <div class="brand">
        <div>
          <a href="#">
            <img src="upload/pic1.dpg" alt="pic1" />
          </a>
        </div>
        <div>
          <a href="#">
            <img src="upload/pic2.dpg" alt="pic2" />
          </a>
        </div>
        <div>
          <a href="#">
            <img src="upload/pic3.dpg" alt="pic3" />
          </a>
        </div>
      </div>
      <nav>
        <a href="#">
          <img src="upload/京东超市.png" alt="nav1" />
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="upload/3C.png" alt="nav2" />
          <span>京东电器</span>
        </a>
        <a href="#">
          <img src="upload/充值中心.png" alt="nav3" />
          <span>充值中心</span>
        </a>
        <a href="#">
          <img src="upload/生鲜.png" alt="生鲜" />
          <span>京东生鲜</span>
        </a>
        <a href="#">
          <img src="upload/clothe.png" alt="clothe" />
          <span>服饰美妆</span>
        </a>
        <a href="#">
          <img src="upload/plus.png" alt="plus会员" />
          <span>Plus会员</span>
        </a>
        <a href="#">
          <img src="upload/京东国际.png" alt="京东国际" />
          <span>京东国际</span>
        </a>
        <a href="#">
          <img src="upload/京东拍卖.png" alt="京东拍卖" />
          <span>京东拍卖</span>
        </a>
        <a href="#">
          <img src="upload/优品.png" alt="拍拍二手" />
          <span>拍拍二手</span>
        </a>
        <a href="#">
          <img src="upload/唯品会.png" alt="唯品会" />
          <span>唯品会</span>
        </a>
      </nav>
      <div class="news">
        <a href="#">
          <img src="upload/new1.dpg" alt="new1" />
        </a>
        <a href="#">
          <img src="upload/new2.dpg" alt="new2" />
        </a>
        <a href="#">
          <img src="upload/new3.dpg" alt="new3" />
        </a>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
